<template>
    <div>
        <el-container>
            <div>
                <div v-if="roleId!==10" style="padding: 0px 20px 0px 20px">
                    <span >下单人：</span>
                    <el-input v-model="pageSearch.clauses[0].value" :clearable="true" class="searchInput" ></el-input>
                    <span style="margin-left: 15px">所属车场：</span>
                    <el-select :value="pageSearch.clauses[2].value" v-model="pageSearch.clauses[2].value"
                               :clearable="true"
                               placeholder="选择车场">
                        <el-option  v-for="item in parkingOption"
                                    :key="item.id"
                                    :label="item.parkingName"
                                    :value="item.id"></el-option>
                    </el-select>
                    <span style="margin-left: 15px">下单时间：</span>
                    <el-date-picker
                            v-model="pageSearch.clauses[3].value"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="起始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                    <el-button style="float: right" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                </div>
                <div style="padding: 20px 20px 0 20px">
                    <el-button  size="mini" type="success" icon="el-icon-search" @click="showOrder">查看</el-button>
                    <el-button type="danger" size="mini" icon="el-icon-close" @click="deleteOrder">删除</el-button>
                </div>
            </div>
            <div style="padding: 0px 20px 0 20px">
                <el-table
                        ref="orderTable"
                        :data="tableData"
                        :header-cell-style="tableHeader"
                        @selection-change="handleSelectionChange"
                        :height="580"
                        border>
                    <el-table-column
                            type="selection"
                            width="35">
                    </el-table-column>
                    <el-table-column
                            prop="createDatetime"
                            label="下单时间"
                            sortable
                            width="160"
                            :formatter="dateFormat"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="orderNum"
                            label="订单号">
                    </el-table-column>
                    <el-table-column
                            prop="parkingName"
                            label="停车场">
                    </el-table-column>
                    <el-table-column
                            prop="plateNum"
                            label="车牌号"
                            width="150"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="userName"
                            label="姓名"
                            width="150"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="phone"
                            label="电话号码"
                            width="130"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="orderStatusValue"
                            label="订单状态"
                            width="120"
                            sortable>
                        <template slot-scope="scope">
                            <span v-if="scope.row.orderStatus===12" style="color:red;">{{scope.row.orderStatusValue}}</span>
                            <span v-else>{{scope.row.orderStatusValue}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="payStatusValue"
                            label="支付状态"
                            width="120"
                            sortable>
                    </el-table-column>
                </el-table>
            </div>
            <el-footer style="height: 30px">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="pageSearch.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-footer>
            <order-dialog
                    :isVisible="dialog.isVisible"
                    :showType="dialog.showType"
                    :title="dialog.title"
                    :parkingOption="parkingOption"
                    :isModify="dialog.isModify"
                    :orderData="dialog.orderData"
                    @close="dialog.isVisible=false"
                    @getList="getOrderList"
            ></order-dialog>
        </el-container>
    </div>
</template>

<script>
    import OrderDialog from '../now/orderDialog'
    import Message from '../../../components/messages/index'
    export default {
        name: "orderList",
        props:{
            payStatus:Number,
            orderStatus:{
                type:Number,
                default:null
            },
        },
        data(){
            return{
                tableHeader:{
                    "background-color":"#DCDFE6",
                    "height":"20px"
                },
                dialog:{
                    isVisible:false,
                    showType:0,
                    isModify:true,
                    orderData:null,
                    title:"",
                },
                parkingOption:[],
                orderStatusOption:[],
                tableData:[],
                total:0,
                pageSearch:{
                    pageSize:10,
                    pageNum:1,
                    clauses:[{
                        column:"userName",
                        operation:"like",
                        value:null,
                    }, {
                        column:"orderStatus",
                        operation:"=",
                        value:null,
                    },{
                        column:"parkingId",
                        operation:"=",
                        value:null,
                    },{
                        column:"createDatetime",
                        operation:"between",
                        value:null,
                    },{
                        column:"payStatus",
                        operation:"=",
                        value:null,
                    },{
                        column:"parkingId",
                        operation:"in",
                        value:null,
                    },{
                        column:"userId",
                        operation:"=",
                        value:null,
                    }],
                    sortMap:{}
                },
                multipleSelection:[],
                roleId:null,
                parkingIdOfUser:[],
            }
        },
        methods:{
            showOrder(){
                if(this.multipleSelection.length!==1){
                    Message.warning("请选择一条数据！")
                }else{
                    this.dialog.orderData=this.multipleSelection[0];
                    this.dialog.title = "查看订单";
                    this.dialog.showType=1;
                    this.dialog.isModify=true;
                    this.dialog.isVisible=true;
                }
            },
            deleteOrder(){
                if(this.multipleSelection.length===0){
                    Message.warning("请选择一条数据");
                }else{
                    Message.confirm2("确定删除所选订单？","warning").then(()=>{
                        this.$http.post("parkingOrder/deleteOrderList",this.multipleSelection).then((res)=>{
                            if(res.status===200){
                                Message.success(res.data);
                                this.search();
                            }
                        })
                    })

                }
            },
            handleSelectionChange(val){
                this.multipleSelection = val;
            },
            getOrderList(){
                this.$http.post("/parkingOrder/getOrderList",this.pageSearch).then(res=>{
                    if(res.status===200){
                        this.tableData=res.data.list;
                        this.total=res.data.total;
                    }
                });
            },
            getSelectOption(){
                this.$http.get("/parking/getParkingNameAndIdIsUsed/1").then(res=>{
                    if(res.status===200){
                        this.parkingOption=res.data
                    }
                })
            },
            search(){
                this.pageSearch.pageNum=1;
                this.getOrderList();
            },
            handleSizeChange(val){
                this.pageSearch.pageSize=val;
                this.getOrderList();
            },
            handleCurrentChange(val){
                this.pageSearch.pageNum=val;
                this.getOrderList();
            },
            dateFormat(row,column){
                let date=row[column.property];
                if (date === undefined) {
                    return "";
                }
                return this.$moment(date).format("YYYY-MM-DD HH:mm:ss");
            },
            init() {
                this.pageSearch.clauses[1].value=this.orderStatus;
                this.pageSearch.clauses[4].value=this.payStatus;
                let user = JSON.parse(localStorage.getItem('user'));
                this.roleId=user.roleId;
                if(this.roleId===1){
                    this.$http.get("/parking/getParkingNameAndIdIsUsed/1/").then(res=>{
                        if(res.status===200){
                            this.parkingOption=res.data
                        }
                    });
                    this.getOrderList();
                }else if(this.roleId===2){
                    this.$http.get("/parking/getParkingOfUser/"+user.id).then(res=>{
                        if(res.status===200){
                            this.parkingOption=res.data;
                            for(let i=0;i<res.data.length;i++){
                                this.parkingIdOfUser.push(res.data[i].id);
                            }
                            if(this.parkingIdOfUser.length>0){
                                this.pageSearch.clauses[5].value=this.parkingIdOfUser;
                            }else{//如果车库管理员没车库
                                this.pageSearch.clauses[5].value=[-1];
                            }
                            this.getOrderList();
                        }
                    });
                }else{
                    this.$http.get("/parking/getParkingNameAndIdIsUsed/1/").then(res=>{
                        if(res.status===200){
                            this.parkingOption=res.data
                        }
                    });
                    this.pageSearch.clauses[6].value=user.id;
                    this.getOrderList();
                }
            }
        },
        mounted() {
            this.init();
            // this.getOrderList();
            // this.getSelectOption();
        },
        components:{OrderDialog},

    }
</script>

<style scoped lang="less">
    .searchInput{
        width:100px;
        height: 20px;
        margin-left: 10px;
    }
</style>